<template>
  <div class="container">
    <div class="app-container">
      <!-- 添加权限按钮 -->
      <div style="padding: 10px">
        <el-button type="primary" size="mini" @click="addPermissionList(1,0)">添加权限</el-button>
      </div>
      <!-- 权限数据表格 -->
      <el-table
        default-expand-all
        :data="permList"
        row-key="id"
      >
        <el-table-column label="名称" prop="name" />
        <el-table-column label="标识" prop="code" />
        <el-table-column label="描述" prop="description" />
        <el-table-column label="操作">
          <template #default="{row}">
            <el-button v-if="row.type === 1" type="text" size="mini" @click="addPermissionList(2,row.id)">添加</el-button>
            <el-button type="text" size="mini" @click="bjClick(row.id)">编辑</el-button>
            <el-popconfirm
              title="您确定删除吗？"
              @onConfirm="delPermList(row.id)"
            >
              <el-button slot="reference" type="text" size="mini">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      title="添加权限"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <el-form ref="formList" :rules="rules" :model="formList" label-width="80px" style="margin:50px">
        <el-form-item label="权限名称" prop="name">
          <el-input v-model="formList.name" type="text" size="mini" />
        </el-form-item>
        <el-form-item label="权限标识" prop="code">
          <el-input v-model="formList.code" type="text" size="mini" />
        </el-form-item>
        <el-form-item label="权限描述" prop="description">
          <el-input v-model="formList.description" type="textarea" size="mini" />
        </el-form-item>
        <el-form-item label="开启">
          <el-switch
            v-model="formList.enVisible"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
        <el-row style="width: 100%" type="flex" justify="center">
          <el-button
            size="mini"
            type="success"
            @click="addPermission"
          >确定</el-button>

          <el-button size="mini" type="danger" @click="cencalClick">取消</el-button>

        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
// 引入接口文件
import { getPermissionListAPI, delPermissionListAPI, addPermissionListAPI, getPermissionAPI, putPermissionListAPI } from '@/api/permission'
// 引入数据转树形结构的组件
import { transListToTreeData } from '@/utils'
export default {
  name: 'Permission',
  data() {
    return {
      dialogVisible: false,
      permList: [],
      formList: {
        name: '',
        code: '',
        description: '',
        type: null,
        enVisible: 1,
        pid: null
      },
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { min: 2, max: 6, message: '名称为2-6位字符', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入标识', trigger: 'blur' },
          { min: 2, max: 10, message: '标识为2-10位字符', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入描述', trigger: 'blur' },
          { min: 1, max: 100, message: '请输入1-100位字符', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    // 调取获取权限列表
    this.getPermissionList()
  },
  methods: {
    // 获取权限列表
    async getPermissionList() {
      // 调取获取权限列表接口
      this.permList = transListToTreeData(await getPermissionListAPI())
    },
    // 删除权限
    async delPermList(id) {
      // 调取删除接口
      await delPermissionListAPI(id)
      // 提示用户
      this.$message.success('删除成功!')
      // 重新获取权限设置
      this.getPermissionList()
    },
    // 点击添加权限，传入不同的参数
    addPermissionList(type, pid) {
      this.dialogVisible = true
      this.formList.type = type
      this.formList.pid = pid
    },
    // 点击取消按键
    cencalClick() {
      // 关闭弹框，清空表单
      this.dialogVisible = false
      this.$refs.formList.resetFields()
    },
    // 点击确定，校验表单
    addPermission() {
      this.$refs.formList.validate(async(isOk) => {
        if (isOk) {
          console.log(this.formList.type)
          if (this.formList.type === 3) {
            // 调取修改用户接口
            await putPermissionListAPI(this.formList)
            // 提示用户修改成功
            this.$message.success('修改角色成功')
            console.log('修改')
          } else {
            // 调取接口
            await addPermissionListAPI(this.formList)
            // 提示用户
            this.$message.success('添加角色成功')
            console.log('添加')
          }
          // 关闭弹框，清空表单
          this.cencalClick()
          this.getPermissionList()
        }
      })
    },
    // 点击编辑
    async bjClick(id) {
      this.dialogVisible = true
      this.formList = await getPermissionAPI(id)
      this.formList.type = 3
    }
  }
}
</script>
